<template>
    <div>
        <div class="vs-table-box">
            <el-form v-loading="loading" ref="ruleForm" label-position="right" :rules="rules" class="orm-info"
                label-width="140px" :model="ruleForm">
                <h3>基本信息</h3>
                <el-form-item label="通告标题：" prop="title">
                    <el-input v-model="ruleForm.title" placeholder="请输入通告标题" :disabled="type == 1"> </el-input>
                </el-form-item>
                <!-- <el-form-item label="通告内容：" prop="content">
                    <el-input v-model="ruleForm.content" placeholder="请输入通告内容" type="textarea" rows="4" autosize></el-input>
                </el-form-item> -->
                <el-form-item label="通告内容：" style="width: 100%" prop="content"
                    :rules="[{ required: true, message: '请输入通告内容', trigger: 'blur' }]"
                    v-if="type == 1 && ruleForm.content">
                    <div v-html="ruleForm.content" class="content"></div>
                </el-form-item>
                <el-form-item label="通告内容：" style="width: 100%" prop="content"
                    :rules="[{ required: true, message: '请输入通告内容', trigger: 'blur' }]" v-else>
                    <div id="edit1" ref="edit1"></div>
                </el-form-item>
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import E from 'wangeditor';
export default {
    data() {
        return {
            editor1: '',
            loading: false,
            type: 1,
            isBtn: false,
            ruleForm: {
                title: '',
                content: '',
            },
            rules: {
                title: [{ required: true, message: '请输入通告标题', trigger: 'blur' }],
                content: [{ required: true, message: '请输入通告内容', trigger: 'blur' }],
            },
        };
    },
    created() {
        this.init();
    },
    watch: {
        $route() {
            this.init();
        },
    },
    mounted() {
        if (this.$route.query.type == 2) {
            this.getEdit();
        }
    },
    methods: {
        init() {
            let { id, type } = this.$route.query;
            if (id) {
                this.getRoom(id);
            }
            if (type) {
                this.type = type;
                this.$route.meta.title = this.utils.typeTitle(type, '通告');
            }
        },
        async getRoom(id) {
            this.loading = true;
            let { code, data } = await this.$Http.getAnnounce({ id });
            this.loading = false;
            if (code) {
                data.beds = data.bed;
                delete data.bed;
                this.ruleForm = data;
                this.getEdit();
            }
        },
        subitm() {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                let obj = Object.assign({}, this.ruleForm);
                this.isBtn = true;
                let { code, data } = await this.$Http.setAnnounce(obj);
                this.isBtn = false;
                if (code) {
                    this.utils.backPage();
                    this.$message.success(obj.id ? '修改成功!' : '添加成功!');
                }
            });
        },
        getEdit() {
            this.editor1 = new E(this.$refs.edit1);
            this.editor1.config.onchange = (html) => {
                this.ruleForm.content = html;
            };
            // this.editor1.config.fontNames = [
            //     '黑体',
            //     '思源黑体',
            //     '仿宋',
            //     '楷体',
            //     '标楷体',
            //     '华文仿宋',
            //     '华文楷体',
            //     '宋体',
            //     '微软雅黑',
            //     'Arial',
            //     'Tahoma',
            //     'Verdana',
            //     'Times New Roman',
            //     'Courier New',
            // ]
            // this.editor1.config.fontSizes = {
            //     'x-small': { name: '20px', value: '1' },
            //     'small': { name: '22px', value: '2' },
            //     'normal': { name: '28px', value: '3' },
            //     'large': { name: '36px', value: '4' },
            //     'x-large': { name: '54px', value: '5' },
            //     'xx-large': { name: '72px', value: '6' },
            //     'xxx-large': { name: '144px', value: '7' },
            // }
            this.editor1.config.customUploadImg = (resultFiles, insertImgFn) => {
                let formData = new window.FormData();
                formData.append('files', resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 'success') {
                        this.$message({
                            message: '上传成功',
                            type: 'success',
                        });
                        insertImgFn(res.data);
                    } else {
                        this.$message(res.msg);
                    }
                });
            };
            this.editor1.config.customUploadVideo = (resultFiles, insertVideoFn) => {
                let formData = new window.FormData();
                formData.append('files', resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 'success') {
                        this.$message({
                            message: '上传成功',
                            type: 'success',
                        });
                        insertVideoFn(res.data);
                    } else {
                        this.$message(res.msg);
                    }
                });
            };
            this.editor1.create();
            this.editor1.txt.html(this.ruleForm.content);
        },
    },
};
</script>

<style lang="sass" scoped>
    .content ::v-deep p
        margin: 0
</style>
